(function () {

    // 类目的模版字符串
    var itemTmpl = '<div class="category-item">' +
        '<img class="item-icon" src=$url />' +
        '<p class="item-name">$name</p>' +
        '</div>';



    /** 
    *  渲染category元素
    * param 
    */
    function initCategory() {
        // 获取category的数据

        var mockData = [{ name: "粉面", imgurl: "http://p1.meituan.net/jungle/3dfc65491265db3ffd14b8d4d3240d3a4123.png" }, { name: "炸鸡", imgurl: "http://p0.meituan.net/jungle/0ce9a33a4accc536ac9e2d8d91951c924673.png" }, { name: "汉堡", imgurl: "http://p1.meituan.net/jungle/0e63b86b4ff14d214c1999a979fd21d14273.png" }, { name: "粉面", imgurl: "http://p1.meituan.net/jungle/3dfc65491265db3ffd14b8d4d3240d3a4123.png" }, { name: "炸鸡", imgurl: "http://p0.meituan.net/jungle/0ce9a33a4accc536ac9e2d8d91951c924673.png" }, { name: "汉堡", imgurl: "http://p1.meituan.net/jungle/0e63b86b4ff14d214c1999a979fd21d14273.png" }, { name: "粉面", imgurl: "http://p1.meituan.net/jungle/3dfc65491265db3ffd14b8d4d3240d3a4123.png" }, { name: "炸鸡", imgurl: "http://p0.meituan.net/jungle/0ce9a33a4accc536ac9e2d8d91951c924673.png" }, { name: "汉堡", imgurl: "http://p1.meituan.net/jungle/0e63b86b4ff14d214c1999a979fd21d14273.png" }]
        var subItems = new Array();
        let menuCount = mockData.length;
        let menuSizeEachPage = 4;//每一页显示4项
        let pageNum = Math.ceil(menuCount / menuSizeEachPage);
        let mSize = 0
        mockData.forEach(function (item, index) {
            // menuCount++;
            mSize++;
            var str = itemTmpl
                .replace('$url', item.imgurl)
                .replace('$name', item.name);
            if (mSize <= 10) {
                $('.category-content').append($(str));

            }
            else {

                subItems.push(str);
            }


        });
        for (let i = 2; i <= pageNum; i++) {
            var divText = '<div class="moreMenu' + i + ' menu">'

            divText += subItems.splice(0, 4).join('');



            divText += '</div>'

            $(".category").append(divText);

        }
        /*  $.get('../data/head.json', function (data) {
              console.log(data);
  
              var list = data.data.primary_filter;//.splice(0, 8); //这里就知道菜单的数量啦
              let menuCount = mockData.length;
              let menuSizeEachPage = 4;//每一页显示4项
              let pageNum = Math.ceil(menuCount / menuSizeEachPage);
              let mSize = 0
          
  
           
  
              for (let i = 1; i <= pageNum; i++) {
                  $("#btnDiv").append('<button onclick="showimg(this)" class="btn"  id="' + i + '">' + i + '</button>');
              }
          });*/
    }




    /** 
    *  绑定item的click事件
    * param 
    */
    function addClick() {
        $('.category-content').on('click', '.category-item', function () {
            alert(1);
        });
    }




    function init() {
        initCategory();
        addClick();
    }

    init();
    $('.category-content').show();

})();


function showimg(btn) {
    var id = btn.id;
    $('.menu').hide();
    if (id == 1) {
        $('.category-content').show();
    }
    else {

        $(".moreMenu" + id).show();
    }

}